<template>
	<div class="main">
		<div class="cart" @click="toCart">
			<el-badge :value="cartNum" class="item">
				<span class="iconfont icon-gouwuche"></span>
			</el-badge>
			<span>我的购物车</span>
		</div>
	</div>
</template>

<script setup>
import { useRouter } from 'vue-router';
import { getCartDatilData } from "@/network/cart";
import { onMounted, ref } from "vue";

const router = useRouter();
const toCart=()=>{
	router.push('/cart/detail')
}
let cartNum = ref(0)

onMounted(()=>{
	// 验证用户的登陆状态
	getCartDatilData().then(res=>{
		cartNum.value = res.data.cart_items.length;
	}).catch(err=>{
		console.log(err)
	})
})

</script>

<style lang="less" scoped>
	@red:#e2231a;
	.main{
		height: 145px;
		margin-top: 45px;
		.cart{
			margin-left: 20px;
			border: 1px solid #e3e4e5;
			height: 35px;
			width: 130px;
			line-height: 35px;
			text-align: center;
			padding-top: 4px;
			&:hover{
				cursor: pointer;
				border: 1px solid @red;
			}
			.item{
				height: 25px;
				line-height: 25px;
				>span{
					color: @red;
					font-weight: 600;
				}
			}
			>span{
				margin-left: 20px;
				color: @red;
			}
		}
	}
</style>